<template>
    <view :style="{ '--color': color }">
        <status-bar title="预约详情"></status-bar>

        <view class="bom" v-if="pageData.v_user_info">
            <image :src="$imgUrls(pageData.v_user_info.v_headimg)" mode="aspectFill" class="headImg" v-if="pageData.v_headimg"></image>
            <view class="content">
                <text class="black size28 bold500 ellipsis">{{ pageData.v_user_info.v_name }}</text>
                <text class="color_66 size24 ellipsis">{{ pageData.v_user_info.v_tel }}</text>
            </view>
            <view class="contact" @click="$common.Tel(pageData.v_user_info.v_tel)">联系TA</view>
        </view>

        <view class="ServiceTime" v-if="pageData.state >= 4">
            <text class="black size30 bold500">服务记时</text>
            <text class="color_33 size46">{{ second }}</text>
        </view>

        <view class="serverBox" v-if="pageData.payment > 0 || pageData.state > 2">
            <block v-if="pageData.payment > 0">
                <text class="color_66 size30 text-center">{{ pageData.feeTip }}</text>
                <view class="Price" :class="{ eidtPrice: pageData.changePriceShow == 1 }" @click="EditPrice">
                    <text class="size28 m-top26 m-right4">￥</text>
                    <text class="size64">{{ pageData.payment }}</text>
                </view>
            </block>
            <block v-if="pageData.state > 2">
                <text class="black size26 m-top20" v-if="pageData.sign_desc">{{ pageData.sign_desc }}</text>
                <view class="drawBox" v-if="pageData.sign_pic">
                    <block v-for="(item, index) in pageData.sign_pic" :key="index">
                        <image :src="$imgUrls(item)" mode="aspectFill" @click="$common.previewImgs(index, pageData.sign_pic)" class="drawImg"></image>
                    </block>
                </view>
            </block>
        </view>

        <view class="Wrapper">
            <view class="applist a-center" v-if="pageData.state >= 6">
                <text class="title">支付状态</text>
                <text class="content" user-select></text>
                <view class="repairTypeName">{{ pageData.payStatusName }}</view>
            </view>
            <view class="applist a-center">
                <text class="title">预约类型</text>
                <text class="content" user-select>{{ pageData.typeName }}</text>
                <view class="repairTypeName">{{ pageData.repairTypeName }}</view>
            </view>
            <view class="applist">
                <text class="title">预约项目</text>
                <text class="content" user-select>{{ pageData.goods_name }}</text>
            </view>
            <view class="applist">
                <text class="title">预约时间</text>
                <text class="content" user-select>{{ pageData.service_time }}</text>
            </view>
            <view class="applist">
                <text class="title">联系人</text>
                <text class="content" user-select>{{ pageData.name }}</text>
            </view>
            <view class="applist">
                <text class="title">联系电话</text>
                <text class="content" user-select @click.stop="$common.Tel(pageData.tel)">{{ pageData.tel }}</text>
            </view>
            <view class="applist">
                <text class="title">服务地址</text>
                <text class="content" user-select>{{ pageData.address }}</text>
            </view>
            <view class="applist">
                <text class="title">备注信息</text>
                <text class="content" user-select>{{ pageData.remark }}</text>
            </view>
            <view class="drawing">
                <text class="color_33 size28">现场图</text>
                <view class="drawBox">
                    <block v-for="(item, index) in pageData.attachment" :key="index">
                        <image :src="$imgUrls(item)" mode="aspectFill" @click="$common.previewImgs(index, pageData.attachment)" class="drawImg"></image>
                    </block>
                </view>
            </view>
        </view>

        <view class="Remarks" v-if="pageData.receive_remark">
            <text class="black size28">备注</text>
            <textarea class="receive_remark" :disabled="true" placeholder="请输入备注" v-model="pageData.receive_remark"></textarea>
        </view>

        <view class="footer">
            <view class="Box" v-if="pageData.state == 1">
                <view class="list Cancel" @click="show = true" v-if="pageData.is_refuse == 1">我要拒单</view>

                <view class="list Config" @click="isTime = true" v-if="pageData.predictionShow == 1">确定预约时间</view>

                <view class="list Config" @click="signIn" v-if="pageData.signShow == 1">签到</view>
            </view>
            <view class="Box" v-if="pageData.state >= 2 && pageData.uploadSign == 1">
                <view class="list Config" @click="clockIn = true">上传资料</view>
            </view>
            <block v-if="pageData.state >= 2 && pageData.uploadSign == 0">
                <view class="Box" v-if="pageData.startButtonShow == 1">
                    <view class="BoxPrice" @click="StartServer">开始服务</view>
                </view>
                <view class="Box" v-if="pageData.changePriceButtonShow == 1">
                    <view class="BoxPrice" @click="recheck = true">复核价格</view>
                </view>

                <view class="Box" v-if="pageData.state == 4">
                    <view class="BoxPrice" @click="Complete = true">完成服务</view>
                </view>
            </block>
        </view>

        <u-popup :show="show" @close="show = false" round="10" closeable>
            <view class="contentBox">
                <text class="black size32 bold500">拒绝原因</text>
                <textarea v-model="reason" auto-height placeholder="请输入拒绝原因" class="reason" />
                <view class="popupBox" v-if="pageData.state == 1">
                    <view class="list Cancel" @click="show = false">取消</view>
                    <view class="list Config" @click="Turndown">提交</view>
                </view>
            </view>
        </u-popup>

        <u-popup :show="clockIn" @close="clockIn = false" round="10" closeable>
            <view class="clockBox">
                <view class="boxine">
                    <text class="black size30 bold500">施工现场情况</text>
                    <textarea v-model="sign_desc" auto-height placeholder="请输入现场情况" class="sign_desc"></textarea>
                </view>
                <view class="boxine m-top20">
                    <text class="black size30 bold500">上传待施工图</text>
                    <view class="boxImgs">
                        <!-- 	@click="$common.previewImgs(index, sign_pic)" -->
                        <view class="list" v-for="(item, index) in sign_pic" :key="index">
                            <image :src="$imgUrls(item)" mode="aspectFill" class="wh bor_radius_10"></image>
                            <view class="close" @click.stop="Del(1, index)">
                                <view class="iconfont icon-guanbi1"></view>
                            </view>
                        </view>
                        <view class="list" @click="UploadImg(1)">
                            <image :src="$staticImg('uploadImg.png')" mode="aspectFill" class="uploadImg"></image>
                        </view>
                    </view>
                </view>
                <view class="popupBox">
                    <view class="list Cancel" @click="clockIn = false">取消</view>
                    <view class="list Config" @click="Clockdown">提交</view>
                </view>
            </view>
        </u-popup>

        <u-popup :show="recheck" @close="recheck = false" round="10" closeable>
            <view class="recheckBox">
                <view class="rechEn">
                    <text class="black size32 bold500 text-center">服务价格</text>
                    <input type="digit" class="digitInput" v-model="payment" placeholder="请输入服务价格" />
                </view>
                <view class="popupBox">
                    <view class="list Cancel" @click="recheck = false">取消</view>
                    <view class="list Config" @click="RecheckDown">复核价格</view>
                </view>
            </view>
        </u-popup>

        <u-popup :show="Complete" @close="Complete = false" round="10" closeable>
            <view class="clockBox">
                <view class="boxine m-top20">
                    <text class="black size30 bold500">纸质验收单</text>
                    <view class="boxImgs">
                        <!-- 	@click="$common.previewImgs(index, sign_pic)" -->
                        <view class="list" v-for="(item, index) in confirm_cer_pic" :key="index">
                            <image :src="$imgUrls(item)" mode="aspectFill" class="wh bor_radius_10"></image>
                            <view class="close" @click.stop="Del(2, index)">
                                <view class="iconfont icon-guanbi1"></view>
                            </view>
                        </view>
                        <view class="list" @click="UploadImg(2)">
                            <image :src="$staticImg('uploadImg.png')" mode="aspectFill" class="uploadImg"></image>
                        </view>
                    </view>
                </view>
                <view class="boxine m-top20">
                    <text class="black size30 bold500">上传完工图</text>
                    <view class="boxImgs">
                        <!-- 	@click="$common.previewImgs(index, sign_pic)" -->
                        <view class="list" v-for="(item, index) in confirm_pic" :key="index">
                            <image :src="$imgUrls(item)" mode="aspectFill" class="wh bor_radius_10"></image>
                            <view class="close" @click.stop="Del(3, index)">
                                <view class="iconfont icon-guanbi1"></view>
                            </view>
                        </view>
                        <view class="list" @click="UploadImg(3)">
                            <image :src="$staticImg('uploadImg.png')" mode="aspectFill" class="uploadImg"></image>
                        </view>
                    </view>
                </view>

                <view class="boxine m-top20">
                    <text class="black size30 bold500">验收码</text>
                    <view class="row m-top30">
                        <u-code-input v-model="confirm_code" :maxlength="6"></u-code-input>
                    </view>
                </view>
                <view class="popupBox">
                    <view class="list Cancel" @click="Complete = false">取消</view>
                    <view class="list Config" @click="Completedown">完成服务</view>
                </view>
            </view>
        </u-popup>

        <view class="CustomerService" :class="showServer ? 'Open' : 'Close'">
            <view class="LeftLine" @click="showServer = !showServer">
                <view class="iconfont" :class="showServer ? 'icon-xiangyougengduo' : 'icon-xiangzuogengduo'"></view>
            </view>
            <view class="RightLine" @click.stop="$common.Tel(pageData.service_info.tel)">
                <view class="iconfont icon-server"></view>
                <text class="size20 white m-top10">联系派单员</text>
            </view>
        </view>

        <u-popup :show="isTime" @close="isTime = false" :round="10" closeable :closeOnClickOverlay="false">
            <view class="TimeBox">
                <text class="black size32">确定预约时间</text>
                <view class="list">
                    <text class="color_33 size32">日期：</text>
                    <view class="selectTime" @click="showData = true" :class="{ black: service_time }">{{ service_time_txt }}</view>
                </view>
                <view class="list">
                    <text class="color_33 size32">时间：</text>
                    <view class="selectTime" @click="hasData" :class="{ black: service_hour_time }">{{ service_hour_time_txt }}</view>
                </view>
                <view class="popupBox">
                    <view class="list Cancel" @click="isTime = false">取消</view>
                    <view class="list Config" @click="Appointment">确定</view>
                </view>
            </view>
        </u-popup>

        <u-datetime-picker :show="showData" v-model="value1" mode="date" @confirm="confirmData" @cancel="showData = false" :minDate="minDate"></u-datetime-picker>
        <u-picker :show="showTime" :columns="pageData.service_hour_time_arr" @cancel="showTime = false" @confirm="confirmTime"></u-picker>
    </view>
</template>

<!-- repair_type  0未定义 1正常单 2 月结单  3定额单 4返修单-->
<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    import MannerOrder from '@/zunyi/Api/index.js';
    export default {
        data() {
            return {
                timer: null,
                show: false, //拒绝
                clockIn: false, // 打卡
                recheck: false, // 复核价格
                Complete: false, // 完成服务
                id: '',
                pageData: '',
                reason: '',
                sign_desc: '',
                sign_pic: [],
                payment: '',
                confirm_code: '', //确认码
                confirm_cer_pic: [], // 纸质验收单
                confirm_pic: [], // 完工图
                showServer: false,
                isTime: false, // 确定预约时间
                service_time: '',
                service_hour_time: '',
                showData: false,
                showTime: false,
                value1: Number(new Date()),
                minDate: Number(new Date())
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
        },
        onShow() {
            this.init();
        },

        methods: {
            async Turndown() {
                if (!this.reason) return this.$Toast('拒绝理由不能为空');
                const requestResult = await Api.refuseOrder(this.id, this.reason);
                this.show = false;
                this.init();
            },

            // 上传资料
            async Clockdown() {
                if (!this.sign_desc) return this.$Toast('请描述现场情况');
                if (!this.sign_pic.length) return this.$Toast('请上传施工现场图');
                const requestResult = await Api.postUploadSign(this.id, this.sign_desc, this.sign_pic);
                this.clockIn = false;
                this.init();
            },

            async RecheckDown() {
                if (!this.payment) return this.$Toast('请输入服务价格');
                this.recheck = false;
                const requestResult = await Api.postModifyMoney(this.id, this.payment);
                this.init();
            },

            async StartServer() {
                const result = await this.$Modals('提示', '是否确定开始服务?');
                if (!result) return;
                const requestResult = await Api.postStartOrder(this.id);
                this.init();
            },

            async Completedown() {
                if (!this.confirm_cer_pic.length) return this.$Toast('请上传验收单');
                if (!this.confirm_pic.length) return this.$Toast('请上传完工图');
                if (!this.confirm_code) return this.$Toast('请输入验收码');

                const requestResult = await Api.postCompleteOrder(this.id, this.confirm_code, this.confirm_cer_pic, this.confirm_pic);
                this.Complete = false;
                this.init();
            },

            async UploadImg(state, count = 9) {
                // state 1 上传待施工图， 2 纸质验收单 3 上传完工图
                // count 允许上传图片张数(默认为9)
                const Result = await this.$common.chooseImage(count);
                if (state == 1) this.sign_pic = [...this.sign_pic, ...Result];
                if (state == 2) this.confirm_cer_pic = [...this.confirm_cer_pic, ...Result];
                if (state == 3) this.confirm_pic = [...this.confirm_pic, ...Result];
            },
            Del(state, Index) {
                // state 1 上传待施工图， 2 纸质验收单 3 上传完工图
                // Index 当前图的索引
                if (state == 1) this.sign_pic.splice(Index, 1);
                if (state == 2) this.confirm_cer_pic.splice(Index, 1);
                if (state == 3) this.confirm_pic.splice(Index, 1);
            },

            EditPrice() {
                if (this.pageData.changePriceShow != 1) return;
                this.payment = this.pageData.payment;
                this.recheck = true;
            },

            async init() {
                let requestObj = {
                    repair_id: this.id,
                    is_master: 1
                };
                const result = await Api.repairOrderDetail(requestObj);
                if (result.service_hour_time_arr && result.service_hour_time_arr.length) {
                    result.service_hour_time_arr = [result.service_hour_time_arr];
                }

                this.pageData = result;
            },

            confirmData(e) {
                this.value1 = e.value;
                this.service_time = this.formatTimestamp(e.value);
                this.showData = false;
            },

            confirmTime(e) {
                this.service_hour_time = e.value[0];
                this.showTime = false;
            },
            hasData() {
                if (!this.service_time) return this.$Toast('请先选择日期');
                this.showTime = true;
            },

            async Appointment() {
                if (!this.service_time) return this.$Toast('请选择日期');
                if (!this.service_hour_time) return this.$Toast('请选择时间');
                const requestResult = await MannerOrder.Post_predictionOrder(this.id, this.service_time, this.service_hour_time);
                this.isTime = false;
                this.init();
            },

            // 签到
            async signIn() {
                const result = await this.$Modals('提示', '是否确定签到');
                if (!result) return;
                const requestResult = await Api.postAcceptOrder(this.id);
                this.init();
            },

            formatTimestamp(timestamp) {
                const date = new Date(timestamp);
                const year = date.getFullYear();
                // 月份从0开始计数，所以需要加1，并且如果是个位数要补0
                const month = String(date.getMonth() + 1).padStart(2, '0');
                // 获取日，同样需要注意补0
                const day = String(date.getDate()).padStart(2, '0');

                // 返回格式化后的日期字符串
                return `${year}-${month}-${day}`;
            },
            formatSeconds(seconds) {
                // 计算天数、小时、分钟和秒
                const days = Math.floor(seconds / (24 * 60 * 60)); // 总秒数除以一天的秒数
                const remainingSecondsAfterDays = seconds % (24 * 60 * 60); // 剩余的秒数
                const hours = Math.floor(remainingSecondsAfterDays / (60 * 60)); // 剩余秒数除以一小时的秒数
                const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60); // 剩余的秒数
                const minutes = Math.floor(remainingSecondsAfterHours / 60); // 剩余秒数除以一分钟的秒数
                const remainingSeconds = remainingSecondsAfterHours % 60; // 最终剩余的秒数

                // 格式化时间
                const formattedTime = [
                    hours.toString().padStart(2, '0'), // 小时
                    minutes.toString().padStart(2, '0'), // 分钟
                    remainingSeconds.toString().padStart(2, '0') // 秒
                ].join(':');

                // 如果有天数，则加上天数
                if (days > 0) {
                    return `${days}天${formattedTime}`;
                }

                // 否则只返回小时、分钟和秒
                return formattedTime;
            }
        },
        computed: {
            ...mapState(['color']),
            second() {
                if (!this.pageData) return '';
                if (this.pageData.state == 4) {
                    this.time = setTimeout(() => {
                        this.pageData.start_second++;
                    }, 1000);
                    return this.formatSeconds(this.pageData.start_second);
                } else if (this.pageData.state > 4) {
                    return this.formatSeconds(this.pageData.start_second);
                }
            },
            service_time_txt() {
                return this.service_time ? this.service_time : '请选择日期';
            },
            service_hour_time_txt() {
                return this.service_hour_time ? this.service_hour_time : '请选择时间';
            }
        },
        beforeDestroy() {
            clearTimeout(this.timer);
            // clearInterval(this.timer);
        },
        onHide() {
            clearTimeout(this.timer);
        },
        onUnload() {
            clearTimeout(this.timer);
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
    }
</style>
<style lang="scss" scoped>
    .Remarks {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        flex-direction: column;
        .receive_remark {
            width: 100%;
            background-color: #f1f1f1;
            min-height: 200rpx;
            padding: 20rpx;
            border-radius: 6rpx;
            font-size: 28rpx;
            color: #000;
            margin-top: 20rpx;
        }
    }
    .TimeBox {
        width: 100%;
        padding: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .list {
            width: 100%;
            margin-top: 24rpx;
            display: flex;
            flex-direction: column;
            .selectTime {
                width: 100%;
                height: 80rpx;
                border: 1px solid #f2f2f2;
                margin-top: 14rpx;
                padding: 0 20rpx;
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: #999;
            }
        }
    }
    .ServiceTime {
        width: 700rpx;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .recheckBox {
        width: 100%;
        padding: 50rpx 40rpx;
        display: flex;
        flex-direction: column;
        .rechEn {
            display: flex;
            flex-direction: column;
        }
        .digitInput {
            width: 100%;
            height: 88rpx;
            background-color: #f2f2f2;
            font-size: 28rpx;
            color: #000;
            padding: 0 24rpx;
            margin-top: 60rpx;
            border-radius: 10rpx;
        }
    }
    .clockBox {
        width: 100%;
        padding: 40rpx;
        display: flex;
        flex-direction: column;

        .boxine {
            display: flex;
            flex-direction: column;
            .sign_desc {
                width: 100%;
                min-height: 240rpx;
                background-color: #f2f2f2;
                padding: 20rpx;
                border-radius: 10rpx;
                font-size: 28rpx;
                margin-top: 24rpx;
            }
            .boxImgs {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10rpx;
                margin-top: 24rpx;
                .list {
                    width: 200rpx;
                    height: 200rpx;
                    background-color: #f2f2f2;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 10rpx;
                    overflow: hidden;
                    position: relative;
                    border: 1px solid #f2f2f2;
                    .uploadImg {
                        width: 80rpx;
                        height: 80rpx;
                    }
                    .close {
                        width: 36rpx;
                        height: 36rpx;

                        position: absolute;
                        top: 10rpx;
                        right: 10rpx;
                        background-color: #ff3355;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .icon-guanbi1 {
                            color: #fff;
                            font-size: 20rpx;
                        }
                    }
                }
            }
        }
    }
    .popupBox {
        width: 100%;
        height: 124rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 40rpx;
        .list {
            width: 300rpx;
            height: 96rpx;
            border-radius: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32rpx;
        }
        .Cancel {
            background-color: #eaeaea;
            color: #666666;
        }
        .Config {
            background-color: var(--color);
            color: #fff;
        }
    }
    .contentBox {
        width: 100%;
        padding: 40rpx 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .reason {
            width: 100%;
            min-height: 240rpx;
            background-color: #f2f2f2;
            padding: 20rpx;
            border-radius: 10rpx;
            font-size: 28rpx;
            margin-top: 40rpx;
        }
    }
    .serverBox {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx 24rpx 40rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .Price {
            color: #ff3355;
            margin-top: 10rpx;
        }
        .eidtPrice {
            border-bottom: 1px solid #f2f2f2;
        }
        .playBtn {
            width: 260rpx;
            height: 80rpx;
            background-color: var(--color);
            color: #fff;
            font-size: 28rpx;
            border-radius: 40rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40rpx;
        }
    }

    .bom {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        align-items: center;
        .headImg {
            width: 96rpx;
            height: 96rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 96rpx;
            margin-right: 10rpx;
        }
        .contact {
            background-color: var(--color);
            color: #fff;
            font-size: 24rpx;
            width: 146rpx;
            height: 60rpx;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .Wrapper {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        .applist {
            width: 100%;
            display: flex;
            margin-bottom: 40rpx;
            .title {
                width: 140rpx;
                color: #333;
                font-size: 28rpx;
                margin-right: 20rpx;
                flex-shrink: 0;
            }
            .content {
                flex: 1;
                color: #333;
                font-size: 28rpx;
            }
            .repairTypeName {
                padding: 4rpx 10rpx;
                font-size: 24rpx;
                border-radius: 6rpx;
                margin-left: 12rpx;
                background-color: #fff7ed;
                color: #ffa641;
            }
        }
        .drawing {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
    }

    .upopup {
        width: 100%;
        padding: 50rpx 30rpx 30rpx 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .wechat {
            width: 360rpx;
            height: 360rpx;
            margin-top: 30rpx;
        }
    }
    .drawBox {
        width: 100%;
        margin-top: 20rpx;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10rpx;
        .drawImg {
            width: 200rpx;
            height: 200rpx;
            border-radius: 12rpx;
            border: 1px solid #eaeaea;
        }
    }

    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        .Box {
            width: 100%;
            height: 124rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20rpx;
            .list {
                flex: 1;
                height: 96rpx;
                border-radius: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
                margin: 0 10rpx;
            }
            .Cancel {
                background-color: #eaeaea;
                color: #666666;
            }
            .Config {
                background-color: var(--color);
                color: #fff;
            }
            .BoxPrice {
                width: 90%;
                height: 96rpx;
                border-radius: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
                background-color: var(--color);
                color: #fff;
            }
        }
    }
    .Open {
        right: 0;
    }
    .Close {
        right: -140rpx;
    }
    .CustomerService {
        position: fixed;
        top: 50%;
        background-color: var(--color);
        display: flex;
        align-items: center;
        border-radius: 10rpx 0 0 10rpx;
        overflow: hidden;
        transition: all 0.3s;
        .LeftLine {
            width: 44rpx;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .iconfont {
                color: #fff;
                font-size: 30rpx;
            }
        }
        .LeftLine:before {
            content: '';
            width: 1px;
            height: 100rpx;
            background-color: rgba(255, 255, 255, 0.3);
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        .RightLine {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20rpx;
            .icon-server {
                color: #fff;
                font-size: 60rpx;
            }
        }
        // width: 100rpx;
        // height: 100rpx;
        // background-color: var(--color);
        // border-radius: 50%;
        // position: fixed;
        // right: 10rpx;
        // top: 50%;
    }
</style>
